<template>

    <el-container>
        <el-header class="homeHeader">
            <div class="title">云E办</div>
            <el-dropdown class="userInfo" @command="handlerCommand">
                          <span class="el-dropdown-link">
                            {{user.name}}<i><img :src="user.userFace"></i>
                          </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="center">个人中心</el-dropdown-item>
                    <el-dropdown-item command="setting">设置</el-dropdown-item>
                    <el-dropdown-item command="logout">注销登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

        </el-header>
    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>
            <div>
                欢迎光临云E班OA系统
            </div>
        </el-main>
    </el-container>
</el-container>
</template>

<script>
    export default {
        name: "Home",
        data(){
           return{
               user:  JSON.parse(window.sessionStorage.getItem("user"))
           }
        },
        methods:{
            handleCommand(command) {
               switch (command) {
                 case 'logout':
                     //注销：前台实现注销
                     this.$confirm('注销操作是否继续?', '提示', {
                         confirmButtonText: '确定',
                         cancelButtonText: '取消',
                         type: 'warning'
                     }).then(() => {
                         //请求后台
                         this.getRequest("admin/logout").then(resp=>{
                             if(resp){
                                 //清除token
                                 window.sessionStorage.removeItem("token");
                                 window.sessionStorage.removeItem("user");

                                 //删除原用户的菜单集合

                                 //重定向到登录页面。
                                 this.$router.replace("/");
                             }
                         })
                     }).catch(() => {
                         this.$message({
                             type: 'info',
                             message: '已取消删除'
                         });
                     });
                     break;
                     case 'info':
                         break;
               }
            }
        }
    }
</script>

<style scoped>

    .homeHeader {
        background: #409aff;
        display: flex;
        align-items:  center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .homeHeader .title{
        font-size: 30px;
        font-family: 华文楷体;
        color: white;
    }
    .homeHeader .userInfo{
        cursor: pointer;
    }

    .homeWelcome{
        text-align: center;
        font-family: 华文楷体;
        font-size: 30px;
        padding-top: 50px;
        color: #409eff;

    }
    .el-dropdown-link img{
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-left: 8px;
    }

    a {
        text-decoration: none;
    }
</style>
